<template>
  <div class="right-container-role">
    <div class="role-opt-header border-style-bottom">
      <el-button :plain="true" @click="save">{{ $t('btn_save') }}</el-button>
    </div>
    <el-tree
      ref="tree"
      :data="treeInfo.data"
      show-checkbox
      class="role-tree"
      :props="treeInfo.defaultProps"
      :node-key="treeInfo.nodeKey"
      :default-checked-keys="treeInfo.checked"
      @check="getCurrentNode"
    ></el-tree>
  </div>
</template>
<script setup name="jurisdiction">
import {
  getMenusDefaultChecked,
  batchUpdatePermissions,
  roleOrUserGetMenusTreeWithResources,
} from '@/api/base'

const { proxy } = getCurrentInstance()
const props = defineProps({
  tableRow: {
    type: Object,
    default: {},
  },
})

// 权限树
const treeInfo = reactive({
  data: [],
  nodeKey: 'code',
  checked: [],
  defaultProps: {
    children: 'children',
    label: 'name',
  },
})
const defaultProps = reactive({
  children: 'children',
  label: 'name',
})

watch(
  () => props.tableRow,
  () => {
    treeInfo.data = []
    treeInfo.checked = []
    loadRight()
  },
  {
    deep: true,
  }
)
onMounted(() => {
  loadRight()
})
function getCurrentNode(data, data1) {
  //如果是底部节点,寻找父节点,并将父节点的子节点查看按钮设置上
  if (data.children === undefined && data1.halfCheckedNodes != null) {
    data1.halfCheckedNodes.forEach((val) => {
      if (
        val.id === data.parentId &&
        proxy.$refs.tree.getNode(val).indeterminate
      ) {
        val.children.forEach((item) => {
          if (item.code.endsWith(':list')) {
            proxy.$refs.tree.setChecked(item, true, false)
          }
        })
      }
    })
  }
}
function loadRight() {
  // 传空则不请求数据，并清空右侧数据
  if (!props.tableRow.orgId) {
    return
  }
  let params = {
    orgId: props.tableRow.orgId,
  }
  roleOrUserGetMenusTreeWithResources(params).then((res) => {
    treeInfo.data = res.data
  })
  let checkParams = {
    subjectId: props.tableRow.id,
    subjectType: 'role',
  }
  getMenusDefaultChecked(checkParams).then((res) => {
    treeInfo.checked = res.data
  })
}
function save() {
  let authList = proxy.$refs.tree.getCheckedNodes(false, true)
  if (!authList || authList.length === 0) {
    proxy.$message({
      message: '控制台权限至少勾选一个',
      type: 'warning',
      duration: 3500,
      showClose: true,
    })
    return
  }
  let itemIndex = authList.findIndex((item) => item.code === 'dashboard')
  if (itemIndex === -1) {
    proxy.$message({
      message: '控制台权限至少勾选一个',
      type: 'warning',
      duration: 3500,
      showClose: true,
    })
    return
  }
  const data = []
  authList.forEach((authNode) => {
    data.push({
      subjectId: props.tableRow.id,
      subjectType: 'role',
      resourceType: authNode.type,
      resourceId: authNode.id,
      level: 'own_and_allot',
    })
  })
  batchUpdatePermissions(data).then((res) => {
    if (res && res.success) {
      // this.dialogInfo.visible = false;
    }
  })
}
</script>

<style scoped lang="scss">
.right-container-role {
  position: relative;
  overflow: hidden;
}
.role-opt-header {
  display: block;
  height: 50px;
  margin-bottom: 20px;
  line-height: 50px;
  padding: 0 20px;
}
.role-tree {
  overflow-y: auto;
  height: calc(100vh - 205px);
}
</style>
